<html>  
    <head>  
        <title>Raphael Play</title>  
		
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>    
        <script type="text/javascript" src="raphael-min.js"></script>    
		<script type="text/javascript" src="g.raphael-min.js"></script>    
		  
		<script type="text/javascript" src="g.bar-min.js"></script>   
		<script type="text/javascript" src="itGraph.js"></script>
		<script type="text/javascript" src="itService.js"></script>
		<script type="text/javascript" src="json2.js"></script>
        <script type="text/javascript" src="itService.js"></script>
        
		<script>
		/*Array.prototype.contains = function(obj) {
			var i = this.length;
			while (i--) {
				if (this[i] == obj) {
					return true;
				}
			}
			return false;
		}*/
		/*
		 function getFactTablesNames() {
                        
                     jsonVar = new Object();
                    //new array of factTables names
                    var factTables = new Array();
                    $.ajaxSetup({async: false});
                    $.post("http://localhost/fb-inteli/itSmallBI/index.php/gettables/getfacttables", 
                        JSON.stringify(jsonVar),
                        function(data){
                        data = JSON.parse(data);
						console.log(data);
                        setFactTables(data.facttables);
                        }   
                    );
                    
                    
                    
                    function setFactTables(data) {
                        
                        for(i = 0; i < data.length; i++) {
                            
                            factTables[i] = data[i];
                            
                            
                        }
                        
                    }
                    
                    return factTables;   
                }
*/
		function cart_prod(X, Y) {
    var out = [];
    for (var i in X) for (var j in Y) out.push([X[i], Y[j]]);
    return out;                     
}

a = cart_prod([1, 2, 3], [4]);
//console.log(a);

		jsonVar = new Object();
		jsonVar.table = "fpost";
		jsonVar.dimensions = new Array();
		
		dimension = new Object();
		dimension.sqlname = "personPosted";
		dimension.dimensionsqlname = "surname";
		
		jsonVar.dimensions.push(dimension);
		
		dimension = new Object();
		dimension.sqlname = "datePosted";
		dimension.dimensionsqlname = "monthName";
		
		jsonVar.dimensions.push(dimension);
		
		dimension = new Object();
		dimension.sqlname = "timePosted";
		dimension.dimensionsqlname = "hour";
		
		jsonVar.dimensions.push(dimension);
		
		jsonVar.measures = new Array();
		
		measure = new Object();
		
		measure.agregatefunction = "AVG";
		measure.sqlname = "numLikes";
		
		jsonVar.measures.push(measure);
		
		service = new itService();
	
		var ktGraph;
		var itGraph;
		window.onload = function() {
			
			/*ktGraph = new itBarGraph();
			ktGraph.x = 10;
			ktGraph.y = 30;
			ktGraph.height = 500;
			ktGraph.width = 750;*/
			var r = new Raphael(document.getElementById('canvas_container'), window.innerWidth-20, window.innerHeight-20);
			
			itGraph = new itGraph(window.innerWidth-20, window.innerHeight-20, r);
			//var bdata1 = [[1,1,1,1,1,1,1,1], [100,100,100,100,100,100,100,100],[2,5,4,10,10,10,10,10]];
			//var bdata2 = [[-54, 60, 13, 42, 5, 1, 2, 10], [10, 20, 1, 50, 32, 30, 20, 5],[20,50,40,10,10,10,10,10]];
			
//			itGraph.graph.SetData(bla);
			//itGraph.graph.ChangeData(bdata2);
			/*
			
			ktGraph.SetPaper(r);
			
			var bdata1 = [[1,1,1,1,1,1,1,1], [100,100,100,100,100,100,100,100],[2,5,4,10,10,10,10,10]];
			var bdata2 = [[54, 60, 13, 42, 5, 1, 2, 10], [10, 20, 1, 50, 32, 30, 20, 5],[20,50,40,10,10,10,10,10]];
				
			ktGraph.SetData(bdata1);
			*/
			//ktGraph.ChangeData(bdata2);
			
			data = service.GetData(jsonVar, 
				function(d){
					itGraph.graph.SetData(d);
				}
			);
			
		}
		
		
		</script>
        <style type="text/css">  
			body{
				background: #333;
			}
            #canvas_container {  
				align: center;
				background: #333;
                border: 0px solid #aaa;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="canvas_container"></div>  

    </body>  
</html> 